<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8" />
		<title>商城</title>
		<script src="/admin/assets/js/jquery-3.5.1.min.js"></script>
		<style>
			/*第一部分：Logo部分*/
		    .header{
		   	    width: 100%;
		    }
		    .header div{
		   	    /*左浮动*/
		   	    float: left;
		   	    width: 33.3%;
		   	    height:75px;
		   	     /*行高*/
		   	    line-height:50px;
		    }
		    /*a标签*/
		   	/*控制Logo部分的a标签*/
			.header a{
		  	    color: #000;/*颜色*/
			}
		    a{
		  	    font-size: 17px;/*字体*/
		        padding:10px;/*控制内边距*/
		  	    text-decoration: none;/*去掉超链接的下划线*/
		    }
		    /*第二部分：导航栏部分*/
		    /*清除浮动*/
		    .clear{
			    clear:both;
			}
			.menu{
				width:100%;
			    background-color: #000;
			    height:50px;
			    padding-top:1px;
			}
			.menu ul li{
				/*去掉标记*/
				list-style-type: none;
				/*元素设为同一行*/
				display: inline;
			}
			.menu a{
				color:#FFF;
			}
			/*第三部分：轮播图*/
			.img1{
				width:100%;
			}
			.img1 img{
				width:100%;
			}
			/*第四部分+第六部分：最新+热门商品*/
			.hot{
				height:50px;
			    padding-top:10px;
			}
			/*左边大图*/
			.left{
				float:left;
				width:16%;
				height: 500px;
			}
			.right{
				float:left;
				width:84%;
				text-align:center;
				height: 500px;
			}
			.middle{
				float:left;
				width: 50%;
				height:250px;
			}
			.item{
				float:left;
				width: 16.6%;
				height:250px;				
			}
			/*第五+七部分:广告图片+正品保证*/
			.adv{
				width:100%;
			}
			/*第八部分:页脚部分*/
			.foot{
				width:100%;
			}
			.foot p{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			<!--第一部分：Logo部分-->
			<div class="header">
				<div id="d1-1"><img src="img/logo2.png"/></div>
			    <div id="d1-2"><img src="img/header.jpg"/></div>
			    <div id="d1-3" align="center">
			    	<a href="/doUserLogin" th:if="${session.user}==null">登录</a>
			    	<a href="/doUserLogin" th:if="${session.user}==null">注册</a>
			    	<a href="/user/car" th:if="${session.user}!=null">购物车</a>
			    </div>	
			</div>
			<!--第二部分：导航栏部分-->
			<!--清除浮动-->
			<div class="clear"></div>
			<div class="menu">
				<ul>
					<li><a href="/user/">首页</a></li>
					<li th:each="m:${typeList}"><a href="javascript:void (0)" th:onclick="showTypeCommodity([[${m.id}]],[[${m.type}]])" th:text="${m.type}"></a></li>
					<li><a href="javascript:void(0)" onclick="showRecommendCommodity()">明星推荐</a></li>
					<li><a href="/user/personalInformation">个人信息</a></li>
				</ul>
			</div>
<!--			&lt;!&ndash;第三部分：轮播图部分&ndash;&gt;-->
<!--			<div class="img1">-->
<!--				<img src="img/1.jpg" />-->
<!--			</div>-->
			<!--第四部分：最新商品部分-->
			<div id="box">
				<div class="hot">
					<h3 style="display: inline;">最新商品</h3>
<!--					<img src="img/title2.jpg"/>-->
				</div>
				<!--左边大图+右边商品-->
				<!--左边大图-->
				<div class="left">
					<img th:src="${commodityList[0].img}" width="95%"/>
				</div>
				<!--右边商品-->
				<div class="right">
					<div class="middle">
						<img  th:src="${commodityList[0].img}" width="95%" height="240px"/>
					</div>
					<div class="item" th:each="m:${commodityList}">
						<img style="width: 40px;height: 30px" th:src="${m.img}"/>
						<p><a th:href="${'/user/details/'+m.id}" th:text="${m.name}"></a></p>
						<p><font color="red" th:text="${m.price}"></font></p>
					</div>
				</div>
			</div>
<!--			&lt;!&ndash;第五部分:广告图片&ndash;&gt;-->
<!--			<div class="adv">-->
<!--				<img src="img/ad.jpg" width="100%"/>-->
<!--			</div>-->
			<!--第八部分:页脚部分-->
			<div class="foot">
				<p>
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">投诉建议</a>
				</p>
				<p>
					CopyRight 2018-2020 XXX商城 &copy;
				</p>
			</div>
		</div>
	</body>
	<script src="/router/userType.js"></script>
</html>